<template>
  <div style="height: 100%;">
    <el-button  type="primary" @click="newBatch">新建批次</el-button>
    <div class="table_resource" style="text-align: center;height: 95%;">
      <el-table
      height=100%
      :data="showTable" border
       style="width: 100%"
      :header-cell-style="{background:'#eef1f6',color:'#606266','text-align':'center'}"
      :cell-style="{'text-align':'center'}"
       stripe
      >
        <el-table-column
          prop="batchName"
          label="批次名称"
          width="300"
        >
        </el-table-column>
        <el-table-column
          prop="phaseTeacherStart"
          label="批次开始时间"
          width="180"
        >
        </el-table-column>
		<el-table-column
		  prop="phaseTeacherEnd"
		  label="批次结束时间"
      sortable
		  width="180"
		>
		</el-table-column>
        <el-table-column prop="levelName" label="批次级别" >
        </el-table-column>
        <el-table-column prop="company" label=" 所属单位" >
        </el-table-column>
        <el-table-column fixed="right"  width="400" >
          <template slot="header">
            <input v-model="keywords" placeholder="请输入批次名称" class="el-input__inner" />
          </template>
		  <template slot-scope="scope">
        <div style="float: left;">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="deleteBatch(scope.$index, scope.row)">删除</el-button
          >
          <el-button
            size="mini"
            type="warning"
            @click="batchDepMaxPassNumber(scope.$index, scope.row)"
            >完成单位
            </el-button
          >
          <el-button
            size="mini"
            type="info"
            @click="expertSet(scope.row)"
            v-if="scope.row.phaseExpertStart!=null &&
                  scope.row.phaseExpertStart!=''   &&
                  new Date(getNowDate())<Date.parse(scope.row.phaseExpertStart) "
            >专家设置</el-button
          >
        </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="resource-page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5,10, 15,20,25]"
        :page-size="pagesize"
        :pager-count="7"
        layout=" prev, pager, next,sizes, jumper"
        :total="filterDataShow.length"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      keywords: "", // 搜索的关键字
      filterDataShow: [], //储存符合条件的数据-
      tableData: [], //分页前的数据
      pagesize: 20,
      currentPage: 1,
      BatchIsHasData:"",
    };
  },
  mounted() {
    this.getDataAxios();
  },
  methods: {
    getNowDate(){
      var nowDate = new Date();
      var year = nowDate.getFullYear();
      var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1): nowDate.getMonth() + 1;
      var day = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate
       .getDate();
      var dateStr = year + "-" + month + "-" + day;
      console.log(dateStr)
      return dateStr
    },
    newBatch(){
        this.$router.push( '/batchCreat')
    },
    //获取批次数据
    getDataAxios() {
      let _that = this;
	  this.$api.batch.getAllBatch()
	  .then(
	  (response)=>{
	  	console.log(response)
	  	this.tableData=response.data.data
	  	console.log(this.tableData)
      this.searchResource(); //在页面挂载后调用此方法，确保数据与页面发生了交互
	  }
	  )

    }
	,
	deleteBatch(index, row){
		let _that=this
		console.log(row.batchId)
		this.$api.batch.getProjectByBatchId({
			batchId:row.batchId
		}).then((response)=>{
		console.log(response.data)
		this.BatchIsHasData=response.data.data
		})

		if(this.BatchIsHasData.length!=0){
			this.$confirm('该批次下已存在项目, 是否继续删除?', '提示', {
						  confirmButtonText: '确定',
						  cancelButtonText: '取消',
						  type: 'warning',
						  center: true,
						}).then(() => {
						 this.$api.batch.deleteBatch({
							 batch_id:row.batchId
						 }).then(
							_that.$api.batch.getAllBatch().then(
								(response)=>{
									console.log(response);
									this.tableData=response.data.data;
									this.searchResource();
								}
							)
						 )
						  this.$message({
							type: 'success',
							message: '删除成功!'
						  });
						}).catch(() => {
						  this.$message({
							type: 'info',
							message: '已取消删除'
						  });
						});
						return
					}

		this.$confirm('此操作将永久删除该批次, 是否继续?', '提示', {
					  confirmButtonText: '确定',
					  cancelButtonText: '取消',
					  type: 'warning',
					  center: true,
					}).then(() => {
					 this.$api.batch.deleteBatch({
						 batch_id:row.batchId
					 }).then(
						_that.$api.batch.getAllBatch().then(
							(response)=>{
								console.log(response);
								this.tableData=response.data.data;
								this.searchResource();
							}
						)
					 )
					  this.$message({
						type: 'success',
						message: '删除成功!'
					  });
					}).catch(() => {
					  this.$message({
						type: 'info',
						message: '已取消删除'
					  });
					});
			  }
		,
    //查询
    searchResource() {
      this.currentPage = 1; //将当前页设置为1，确保每次都是从第一页开始搜
      let filterKeywords = this.keywords.trim();
      let filerReasource = this.tableData.filter((item) => {
        //过滤全部数据
        if (item.batchName.includes(filterKeywords)) {
          return item;
        }
      });
      this.filterDataShow = filerReasource; //将符合条件的内容赋给filterDataShow
    },
    onSubmit() {},
    handleSizeChange(psize) {
      this.pagesize = psize;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    expertSet(row){
      this.$router.push({path:'/ExpertSet',query:{batchId:row.batchId}})
    },
    handleEdit(index, row) {
      this.$router.push({path: '/batchComplie', query: {batch_id: row.batchId}})
    },
    handleDelete(index, row) {
      console.log(row);
    },

    batchDepMaxPassNumber(index, row) {
      this.$router.push({path: '/batchDepMaxPassNumber', query: {batch_id: row.batchId}})
      console.log(row);
    },
  },
  watch: {
    //监听搜索框内容，当搜索框内容发生变化时调用searchResource方法
    keywords() {
      this.searchResource();
    },
  },
  computed: {
    //showTable计算属性通过slice方法计算表格当前应显示的数据
    showTable() {
      return this.filterDataShow.slice(
        (this.currentPage - 1) * this.pagesize,
        this.currentPage * this.pagesize
      );
    },
  },
};
</script>
<style scoped>
#find {
  width: 400px;
  margin-bottom: 30px;
}
</style>
